<template>
  <div class="login">
    <div class="log">
      <p>注册</p>
    </div>
    <div class="neirong">
      <div class="phone">
        <span class="img">
          <img :src="phone" alt />
        </span>
        <div class="inp">
          <span class="num">+ 86</span>
          <input type="tel" name id v-model="phoneNum" />
        </div>
      </div>
      <div class="pwd">
        <span class="img">
          <img :src="lock" alt />
        </span>
        <div class="inp">
          <input type="number" name id v-model="validata" />
          <div class="yanzheng" @click="getValidate" :disabled="!isnotsend" :time="time" v-if="isnotsend">获取验证码</div>
          <van-count-down class="daojishi" v-else :time="time" format="sss"/>
        </div>
      </div>
    </div>
    <div class="btn">
      <img :src="canToReg?regbtn:unregbtn" @click="reg" alt />
    </div>
    <div class="end">
      <span class="end1">注册表示同意</span>
      <span class="end2" @click="jumpxieyi">用户协议</span>
      <span class="end3">|</span>
      <span class="end4" @click="jumpxieyi">隐私条款</span>
    </div>
  </div>
</template>
<script>
import { _checkValidate,_sendvalidatecode } from '../../service/user.js'
export default {
  data() {
    return {
      phone: require("../../assets/img/ph@2x.png"),
      lock: require("../../assets/img/locked@2x.png"),
      canToReg:false,
      regbtn:require('../../assets/img/regactive.png'),
	  unregbtn:require('../../assets/img/regunactive.png'),
      isnotsend:true,
      time:60000,
      phoneNum:"",
	  validata:"",
    };
  },
  watch: {
      phoneNum (newValue, oldValue) {
			if (newValue > oldValue) {
				if (newValue.length === 4 || newValue.length === 9 ) {
					var pre = newValue.substring(0, newValue.length - 1)
					var last = newValue.substr(newValue.length - 1, 1)
					this.phoneNum = pre + ' ' + last
				} else {
					this.phoneNum = newValue
				}
			} else {
				if (newValue.length === 9 || newValue.length === 4) {
					this.phoneNum = this.phoneNum.trim()
				} else {
					this.phoneNum = newValue
				}
			}
		},
		validata(newValue, oldValue){
			this.canToReg=false
			if(this.validatephone(this.phoneNum)&&this.validataMsg(this.validata)){
				this.canToReg=true
			}
		}
  },
  activated() {
    this.phoneNum = "";
    this.validata = "";
  },
  methods: {
    jumpxieyi() {
      this.$router.push("/reg/UserAgreement");
    },
    getValidate() {
      let _this = this;
      if (this.validatephone(this.phoneNum)) {
        let nub = _this.phoneNum.replace(/\s*/g, "").replace("+86", "");
        this.isnotsend = false;
        setTimeout(() => {
          _this.isnotsend = true;
        }, 60000);
        _sendvalidatecode({ mobile: nub }).then(res => {
          _this.$toast(res.message);
        });
      } else {
        this.$toast.fail("请输入正确的手机号");
      }
    },
    reg() {
        
      if (!this.canToReg) {
        return;
      }
          console.log(222222);
      let _this = this;
      if (this.validatephone(this.phoneNum)) {
        let nub = _this.phoneNum.replace(/\s*/g, "").replace("+86", "");
        _checkValidate({
          mobile: nub,
          mobile_code: _this.validata
        }).then(res => {
          _this.$toast(res.message);
          if (res.errcode == 1) {
            _this.$router.push({ path: "/reg/confirm", query: { nub } });
          }
        });
      }
    },
    validataMsg(val) {
      if (!/^[0-9]{4}$/.test(val)) {
        return false;
      }
      return true;
    },
    validatephone(val) {
      let nub = val.replace(/\s*/g, "").replace("+86", "");
      if (!/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(nub)) {
        return false;
      }
      return true;
    }
  }
};
</script>
<style scoped>
.login {
  width: 100%;
  height: 100%;
  padding: 100px 67px 0 67px;
}
.daojishi{
  width: 75px;
  height: 20px;
  float: right;
  position: relative;
  top: -25px;
  background-color: rgb(238, 238, 238);
  font-size: 12px;
  text-align: center;
  line-height: 20px;
    
}
.log {
  font-size: 24px;
  font-weight: 800;
  line-height: 27px;
  color: #000;
}
.yanzheng {
  width: 75px;
  height: 20px;
  float: right;
  position: relative;
  top: -25px;
  background-color: rgb(238, 238, 238);
  font-size: 12px;
  text-align: center;
  line-height: 20px;
  color: rgb(102,102,102);
}
.pwd {
  margin: 15px 0 0 0;
}
.neirong {
  width: 100%;
  margin: 105px 0 0 0;
}
.img img {
  width: 11px;
}
.inp {
  width: 97%;
  border: 1px solid rgb(204, 204, 204);
  border-top: none;
  border-left: none;
  border-right: none;
  position: relative;
  left: 20px;
  top: -25px;
}
input {
  background: none;
  outline: none;
  border: none;
  height: 30px;
  line-height: 30px;
  font-family: "DINPro-Bold";
  font-size: 16px;
  color: #000;
  caret-color: #000;
  margin: 0 0 0 5px;
}
.num {
  font-size: 15px;
  font-weight: 800;
}
.btn img {
  width: 270px;
  margin: 0 0 0 -10px;
}

.cle img {
  width: 15px;
  margin-left: 20px;
  margin-top: -5px;
}
.end {
  margin: 5px 0 0 20px;
  font-size: 12px;
  font-family: "PingFang SC","Microsoft YaHei";
  font-weight: 800;
}
.end1 {
  margin: 0 5px 0 15px;
  color: rgb(204, 204, 204);
}
</style>